<template>
    <el-container class="Home">
        <el-header class="Home-header">
            <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                :ellipsis="false"
          
            >
                <el-menu-item index="0">LOGO</el-menu-item>
                <div class="flex-grow"></div>
                <el-sub-menu index="2">
                    <template #title>个人信息</template>
                    <el-menu-item index="2-1">退出</el-menu-item>
                </el-sub-menu>
                
            </el-menu>
        </el-header>
        <el-container class="Home-container">
            <el-aside class="Home-container-aside">
                <el-menu
                    class="el-menu-vertical-demo"
                    router
                    :default-active="defaultActive"
                >
                    <template v-for="(item, idx) in menuList" :key="idx">
                        <el-sub-menu 
                            v-if="item.children && item.children.length != 0" 
                            :index="String(idx + 1)"
                        >
                            <template #title>
                                <el-icon :size="18">
                                    <component
                                        :is="$icon[item.meta.icon]"
                                    ></component>
                                </el-icon>
                                <span>{{ item.meta.title }}</span>
                            </template>
                            <template 
                                v-for="(itemChild, itemChildIdx) in item.children" 
                                :key="itemChildIdx">
                                <el-menu-item :index="itemChild.path">
                                    <el-icon :size="18">
                                        <component
                                            :is="$icon[itemChild.meta.icon]"
                                        ></component>
                                    </el-icon>
                                    <template #title>{{ itemChild.meta.title }}</template>
                                </el-menu-item>
                            </template>
                        </el-sub-menu>
                        <el-menu-item v-else :index="item.path">
                            <el-icon :size="18">
                                <component
                                    :is="$icon[item.meta.icon]"
                                ></component>
                            </el-icon>
                            <template #title>{{ item.meta.title }}</template>
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-aside>
            <el-main>
                <RouterView></RouterView>
            </el-main>
        </el-container>
    </el-container>
</template>
    
<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const activeIndex = ref('1')
const defaultActive = ref('/') // 默认选中下标
const menuList = router.options.routes[1].children;

onMounted(() => {
    defaultActive.value = router.currentRoute.value.fullPath;
})
</script>
    
<style scoped lang="scss">
.Home{
    width: 100vw;
    height: 100vh;
    &-header{
        width: 100%;
        display: flex;
        background: #fff;
        .el-menu-demo{
            width: 100%;
            .flex-grow {
                flex-grow: 1;
            }
        }
    }
    &-container{
        width: 100%;
        height: calc(100vh - 60px);
        background: pink;
        &-aside{
            width: 200px;
            height: 100%;
            background: #fff;
            .el-menu{
                height: 100%;
                .el-menu-item{
                    height: 60px;
                }
            }
        }
        .el-main{
            background-color: #eff2f5;
        }
    }
}

</style>